<!-- <template>
	<view class="content">

		<view>
			<video src="rtmp://192.168.2.214:8935/live/h5push" style="width: 100vw;height: 400rpx;" :autoplay="true" controls></video>
		</view>

	

	</view>
</template>
 -->
<template>
	<view style="box-sizing: border-box;">
		<view class="uni-padding-wrap uni-common-mt">
			<view>
				<!-- rtmp://qixinlive.shenguanyun.show/qixinlive/0000?auth_key=1608180492-0-0-a6f2eeff695d04f7829c -->
				<!-- <video id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
				 @error="videoErrorCallback" :danmu-list="danmuList"  enable-danmu danmu-btn controls style="width: 100%;
		height: 600px !important;"></video> -->
				<!-- <video  id="myVideo"  src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
						@error="videoErrorCallback" :danmu-list="danmuList" autoplay="true"  enable-danmu danmu-btn controls="false" style="width: 100%;
						height: 600px !important;">
				</video> -->
				<video  id="myVideo"  src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
						@error="videoErrorCallback" :danmu-list="danmuList" autoplay enable-danmu danmu-btn style="width: 100%;
						    height: 100vh!important;">
				</video>
				<!-- <view class="" style="position: absolute;top: 50;">
					<input type="text" value="消息" ></input>
				</view> -->
				<view class="" style="position: absolute; color:#FFFFFF;top: 0;">
					123
				</view>
				
				
				
			</view>
			<!-- #ifndef MP-ALIPAY -->
			<!-- <view class="uni-list uni-common-mt">
				<view class="uni-list-cell">
					<view>
						<view class="uni-label">弹幕内容</view>
					</view>
					<view class="uni-list-cell-db">
						<input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
					</view>
				</view>
			</view>
			<view class="uni-btn-v">
				<button @click="sendDanmu" class="page-body-button">发送弹幕</button>
			</view> -->
			<!-- #endif -->
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				src: '',
				danmuList: [{
						text: '第 1s 出现的弹幕',
						color: '#ff0000',
						time: 1
					},
					{
						text: '第 3s 出现的弹幕',
						color: '#ff00ff',
						time: 3
					}
				],
				danmuValue: '',
				// rtmp:'rtmp://qixinlive.shenguanyun.show/qixinlive/0000?auth_key=1608187693-0-0-5914f71babacdbaf958*/',
				rtmp:'rtmp://qixinlives.shenguanyun.show/qixinlive/0000?auth_key=1608199146-0-0-1d1b3b255e187f66c327db07551d8930',
			}
		},
		onReady: function(res) {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo')
			// #endif
		},
		methods: {
			sendDanmu: function() {
				this.videoContext.sendDanmu({
					text: this.danmuValue,
					color: this.getRandomColor()
				});
				this.danmuValue = '';
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			getRandomColor: function() {
				const rgb = []
				for (let i = 0; i < 3; ++i) {
					let color = Math.floor(Math.random() * 256).toString(16)
					color = color.length == 1 ? '0' + color : color
					rgb.push(color)
				}
				return '#' + rgb.join('')
			}
		}
	}
</script>


<style lang="scss" scoped>
	/deep/.uni-video-controls {
		justify-content: space-between;
		display: none;
	}

	/deep/.uni-video-bar-full {
		justify-content: space-between;
	}


	#myVideo {
		width: 100%;
		height: 900rpx !important;
	}

	.uni-list {
		display: flex;
		box-sizing: border-box;
		padding: 20rpx 40rpx;
	}
</style>
